<template>
<view class="dm-rentStatement-box padding">
  <view>选择租期&nbsp;：<text class="text-gray">4号到8号</text></view>
  <view>选择计算&nbsp;：<text class="text-gray">来回物流途中不算租期</text></view>
  <!-- 周期进度条 -->
  <view class="cycle-box flex margin-tb">
    <view class="cycle-item text-center" v-for="(cycle, index) in rentCycle" :key="index">
      <view class="cycle-block flex margin-bottom-sm" :class="index === 0 ? 'first' : index === (rentCycle.length - 1) ? 'last' : ''">
        <view class="cycle-block-item" :style="{backgroundColor: cycle.bg_color, color: cycle.text_color}" v-for="day in cycle.days" :key="day">{{ day }}</view>
      </view>
      <view class="cycle-label text-sm" :style="{color: cycle.bg_color}">{{ cycle.label }}</view>
    </view>
  </view>

  <view class="statement">
    <view>说明：</view>
    <view class="text-sm text-gray">租赁自发货起的第四天开始计算,归还物流显示揽件截止,如:2月10日下单租期,平台10号发货则14号起计租,平台11号发货则15号起计。</view>
    <view class="text-sm text-gray">因商家原因提前发货,租期起算时间以下单租期为准;因租户原因导致签收不及时也算入租期;由于物流时效存在不可控因素,如租户需紧急使用可下单后致电商家。</view>
  </view>
</view>
</template>

<script>
export default {
  name: 'dm-rentStatement',
  data () {
    return {
      rentCycle: [
        {
          days: [2, 3],
          bg_color: '#e8e8e8',
          text_color: '#adadad',
          label: '快递中'
        },
        {
          days: [4],
          bg_color: '#333',
          text_color: '#fff',
          label: '签收'
        },
        {
          days: [5,6,7,8],
          bg_color: '#333',
          text_color: '#fff',
          label: '实际使用天数'
        },
        {
          days: [9],
          bg_color: '#b2bebc',
          text_color: '#fff',
          label: '揽收'
        },
        {
          days: [10, 11],
          bg_color: '#e8e8e8',
          text_color: '#adadad',
          label: '快递中'
        }
      ]
    }
  }
}
</script>

<style lang="less">
.cycle-box {
  .first {
    border-top-left-radius: 20rpx;
    border-bottom-left-radius: 20rpx;
    overflow: hidden;
  }
  .last {
    border-top-right-radius: 20rpx;
    border-bottom-right-radius: 20rpx;
    overflow: hidden;
  }
}
.cycle-block-item {
  width: 68rpx;
  height: 60rpx;
  line-height: 60rpx;
  background: #333;
}
.statement {
  line-height: 1.8;
}
</style>
